import {Component} from "react";
import './allproduct.css'
import React from "react";
import axios from "axios"

import Page from "../Page";
// import {nanoid} from "nanoid"
export default class Allproduct extends Component{
    state = {
        product:[
        ],
        proxy: "",
        switchBox: 0,
        objItemId:1,
        pages:{
            page:1,
            pageSize:10,
            pageMax:0,
            prePage:0,
            nextPage:0,
            isFirstPage:true,
            isLastPage:false
        },
        productNumber:0,
        saveOrRevise:0,

        navigatePage:[]

    }
    checkRef = React.createRef();
    inputRef = React.createRef();
    //获取修改商品的各数据
    productNameRef= React.createRef();
    productTitleRef= React.createRef();
    productPriceRef= React.createRef();
    productSalePriceRef= React.createRef();
    productIsEnabledRef= React.createRef();
    //-----------------
    componentDidMount() {
        const {pages} = this.state
        this.pagination()
        this.selectProductNumber()

    }
    //因为在ajax异步请求中对state进行了更新，防止在异步操作未得到结果时组件被卸载造成的报错，在组件卸载时撤销state的更新
    //同时还有 定时器、flag方法
    componentWillUnmount = () => {
        this.setState = () => {
            return;
        };
    }

    pagination = ()=>{
        const {pages} = this.state
        const {page} = this.state.pages
        console.log("未跳转的page",this.state.pages.page)
        axios.request({
            method:"post",
            url:this.state.proxy +"/product",
            data:{pageSize:pages.pageSize,page:pages.page}
        }).then( response => {
            const {data} = response
            this.setState({product: response.data.list, navigatePage:data.navigatepageNums, pages: {...pages,page: data.pageNum,prePage:data.prePage,nextPage:data.nextPage,isFirstPage:data.isFirstPage,isLastPage:data.isLastPage}})
            console.log(this.state.product)
            // console.log(this.state.pages.page)
        })
    }



    //获得商品总数
    selectProductNumber = ()=>{
        axios.request({
            method:"get",
            url:this.state.proxy +"/selectproductnumber"
        }).then(response => {
            this.setState({productNumber:response.data,pages:{pageMax:response.data}})
        })
    }

    inquire = () => {
        const pram = this.checkRef.current.value
        axios.request({
            method:"post",
            url:this.state.proxy +"/selectbyname",
            data:{productName:pram}
        }).then( response => {
            this.setState({product:response.data})
        })
    }

    deleteById = (ObjId) => {
        console.log(ObjId)
        axios.request({
            method:"post",
            url:this.state.proxy +"/deletebyid",
            data:{productId:ObjId}
        }).then(response => {
            this.pageRequest(this.state.pages.page)
        })
    }

    //修改、添加前先将表置空再输入数据
    setFromNull = ()=>{
            this.productNameRef.current.value      =""
            this.productTitleRef.current.value     =""
            this.productPriceRef.current.value     =""
            this.productSalePriceRef.current.value =""
            this.productIsEnabledRef.current.value = 0
    }

    //修改操作和添加操作的回调函数
    changeItem = () => {
        let createTime = new Date()
        // console.log(createTime.getTime())
        let randomId = Math.random() * 100000
        console.log("随机数是", randomId)
        const {saveOrRevise} = this.state

        /**
         * 修改操作
         *
         */
        if (saveOrRevise === 0) {
            axios.request({
                method: "post",
                url: this.state.proxy +"/updatebyid",
                data: {
                    productId: this.state.objItemId,
                    productName: this.productNameRef.current.value,
                    productTitle: this.productTitleRef.current.value,
                    productPrice: this.productPriceRef.current.value,
                    productSalePrice: this.productSalePriceRef.current.value,
                    productIsEnabled: this.productIsEnabledRef.current.value,
                    // productCreateDate:
                }
            }).then(response => {
                this.pageRequest(this.state.pages.page)
            })
        } else {
            /**
            * 添加操作
            *
            */
            axios.request({
                method: "post",
                url: this.state.proxy +"/insert",
                data: {
                    productName: this.productNameRef.current.value,
                    productTitle: this.productTitleRef.current.value,
                    productPrice: this.productPriceRef.current.value,
                    productSalePrice: this.productSalePriceRef.current.value,
                    productIsEnabled: this.productIsEnabledRef.current.value,
                }
            }).then(response => {
                this.pageRequest(this.state.pages.page)
            })
        }
    };
    //切换页数的回调函数
    changePage = (pageObj)=>{
        console.log("pageObj = ",pageObj)
        console.log("上一次state = ",this.state)
        const oldPages = this.state.pages

        //上一页
        if (pageObj === -1){
            console.log("进入了pageObj === -1 的判断")
            // this.setState({pages:{...oldPages,page: this.state.pages.prePage}})
            this.pageRequest(this.state.pages.prePage)

            console.log("修改后的pages ",this.state.pages)

            //下一页
        }else if(pageObj === -3) {
            console.log("进入了pageObj === -3 的判断")

            // this.setState({pages: {...oldPages,page: this.state.pages.nextPage }})
            this.pageRequest(this.state.pages.nextPage)

            console.log("修改后的pages ",this.state.pages)

        }else {
            console.log("进入了pageObj else 的判断")

            // this.setState({pages: {...oldPages,page: pageObj}})
            this.pageRequest(pageObj)

            console.log("修改后的pages ",this.state.pages)


        }
        console.log("pageObj = ",pageObj)
        // console.log("navigatePage",this.state.navigatePage)
    }
    //切换页面的ajax请求函数
    pageRequest = (pageObj)=>{
        axios.request({
            method:"post",
            url:this.state.proxy +"/product",
            data:{pageSize:this.state.pages.pageSize,page:pageObj}
        }).then( response => {
            const {data} = response
            this.setState({product: response.data.list,navigatePage:data.navigatepageNums,pages: {...this.state.pages,page: data.pageNum,prePage:data.prePage,nextPage:data.nextPage,isFirstPage:data.isFirstPage,isLastPage:data.isLastPage}})
        })
    }

    inputForm = (productObj)=>{
        this.productNameRef.current.value      = productObj.productName
        this.productTitleRef.current.value     = productObj.productTitle
        this.productPriceRef.current.value     = productObj.productPrice
        this.productSalePriceRef.current.value = productObj.productSalePrice
        this.productIsEnabledRef.current.value = productObj.productIsEnabled
    }


    render(){
        const {product} = this.state
        const {pages} = this.state
        const {page} = this.state.pages
        // console.log("最大页码",this.state.pages.pageMax)
        return(
            <div className="allproduct_parent">
                <div className="main_content">
                <span className="title">
                    所有商品
                </span>
                    <div className="parent_div footer">
                        <form>
                            产品名称&nbsp;&nbsp;<input type="text" className="footer_input" ref={this.checkRef}/>&nbsp;&nbsp;
                            <span className="">
                            产品类型&nbsp;&nbsp;
                                <select className="footer_select">
                                    <option value="222">测试</option>
                                    <option value="222">测试</option>
                                    <option value="222">测试</option>
                                    <option value="222">测试</option>
                                </select>
                            </span>&nbsp;&nbsp;
                            <button type="button" className="footer_btn_red" onClick={this.inquire}>查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" className="footer_btn_white">重置</button>
                        </form>
                        <div className="footer_tag">
                            <span>产品状态</span>
                            &nbsp;&nbsp;&nbsp;
                            <span>
                                <input type="checkbox" id="state1" className="tag_input" />
                                <label htmlFor="state1" className="tag_label">销售中</label>
                            </span>
                            <span>
                                <input type="checkbox" id="state2" className="tag_input"/>
                                <label htmlFor="state2" className="tag_label">停售中</label>
                            </span>
                            <span>
                                <input type="checkbox" id="state3" className="tag_input"/>
                                <label htmlFor="state3" className="tag_label">促销中</label>
                            </span>
                        </div>
                        <button className="add_btn" onClick={()=>{this.setState({switchBox:1,saveOrRevise:1})}}>添加一件产品</button>&nbsp;&nbsp;&nbsp;
                        <button className="refresh_btn" onClick={()=>{this.pageRequest(this.state.pages.page)}}>刷新产品列表</button>
                        <div className="total">
                            <span className="glyphicon glyphicon-search total_icon"></span>
                            &nbsp;&nbsp;<span>产品总数 {this.state.productNumber} 件</span>
                        </div>
                        <div className="list_head">
                            <span className="list_item">产品名称</span>
                            <span className="list_item">产品标题</span>
                            <span className="list_item">原价</span>
                            <span className="list_item">促销价</span>
                            <span className="list_item">创建时间</span>
                            <span className="list_item">上架状态</span>
                            <span className="list_item">操作</span>
                        </div>
                        {/*修改输入窗口*/}
                        <div className="box_parent" >
                            <div ref={this.inputRef} className="box" style={{display:this.state.switchBox === 1 ? "block":"none"}}>
                                {/*<a className='x' href=''>关闭</a>*/}
                                <div className="span_input">
                                    <span>产品名称</span>
                                    <input type="text" ref={this.productNameRef}/>
                                </div>
                                <div className="span_input" >
                                    <span>产品标题</span>
                                    <input type="text" ref={this.productTitleRef}/>
                                </div>
                                <div className="span_input" >
                                    <span>原价</span>
                                    <input type="text" ref={this.productPriceRef}/>
                                </div>
                                <div className="span_input">
                                    <span>促销价</span>
                                    <input type="text" ref={this.productSalePriceRef}/>
                                </div>
                                <div className="span_input input_select">
                                    <span>上架状态</span>
                                    {/*<select className="footer_select" onChange={(event)=>{this.setState({productIsEnabled:event.target.value})}}>*/}
                                    <select className="footer_select" ref={this.productIsEnabledRef}>
                                        <option value="0">销售中</option>
                                        <option value="1">促销中</option>
                                        <option value="2">停售中</option>
                                    </select>
                                </div>
                                <div>
                                    <input type="button" value="确定" className="input_btn" onClick={()=>{this.changeItem();this.setState({switchBox:0})}}/>
                                    <input type="button" value="取消" className="input_btn" onClick={()=>{this.setState({switchBox:0})}}/>
                                </div>
                            </div>
                        </div>
                        {/* {
                            product.map((productObj,key) => {
                                // const {pages} = this.state
                                // const {page} = this.state.pages
                                // console.log(productObj.productId)
                                const ObjId = productObj.productId
                                // console.log(ObjId)
                                return(
                                    <div className="list_head1" key={productObj.productId}>
                                        <span className="list_item1">{productObj.productName}</span>
                                        <span className="list_item1">{productObj.productTitle}</span>
                                        <span className="list_item1">{productObj.productPrice}</span>
                                        <span className="list_item1">{productObj.productSalePrice}</span>
                                        <span className="list_item1">{productObj.productCreateDate}</span>
                                        <span className="list_item1">
                                            <p className="category">
                                                {productObj.productIsEnabled === 0 ?"销售中": productObj.productIsEnabled === 1 ? "促销中" : "停售中"  }
                                            </p>
                                        </span>
                                        <span className="list_item1 delete_btn_parent">
                                            <button className="delete_btn" onClick={()=>{this.deleteById(ObjId);    this.setFromNull()  }}>删除</button>
                                            <button className="delete_btn" onClick={()=>{this.setState({switchBox:1,objItemId:ObjId,saveOrRevise:0});   this.inputForm(productObj) }}>修改</button>
                                        </span>
                                    </div>
                                )
                            })
                        } */}
                                    <div className="list_head1" >
                                        <span className="list_item1">测试</span>
                                        <span className="list_item1">测试</span>
                                        <span className="list_item1">测试</span>
                                        <span className="list_item1">测试</span>
                                        <span className="list_item1">测试</span>
                                        {/* <span className="list_item1">
                                            <p className="category">
                                                {productObj.productIsEnabled === 0 ?"销售中": productObj.productIsEnabled === 1 ? "促销中" : "停售中"  }
                                            </p>
                                        </span> */}
                                        {/* <span className="list_item1 delete_btn_parent">
                                            <button className="delete_btn" onClick={()=>{this.deleteById(ObjId);    this.setFromNull()  }}>删除</button>
                                            <button className="delete_btn" onClick={()=>{this.setState({switchBox:1,objItemId:ObjId,saveOrRevise:0});   this.inputForm(productObj) }}>修改</button>
                                        </span> */}
                                    </div>

                        <div className="pages_parent">
                            <nav aria-label="Page navigation ">
                                <ul className="pagination pagination-lg">
                                    <li>
                                        <a href="#" aria-label="Previous" onClick={()=>{this.changePage(-1)}} style={{pointerEvents:this.state.pages.isFirstPage? "none" :"auto"}}>
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li><a href="#" onClick={()=>{this.changePage(this.state.navigatePage[0])}} style={{pointerEvents:this.state.pages.isFirstPage? "none" :"auto"}}>    {this.state.navigatePage[0]}</a></li>
                                    <li><a href="#" onClick={()=>{this.changePage(this.state.navigatePage[1])}} >    {this.state.navigatePage[1]}</a></li>
                                    <li><a href="#" onClick={()=>{this.changePage(this.state.navigatePage[2])}} >    {this.state.navigatePage[2]}</a></li>
                                    <li><a href="#" onClick={()=>{this.changePage(this.state.navigatePage[3])}} >    {this.state.navigatePage[3]}</a></li>
                                    <li><a href="#" onClick={()=>{this.changePage(this.state.navigatePage[4])}} style={{pointerEvents:this.state.pages.isLastPage? "none" :"auto"}}>    {this.state.navigatePage[4]}</a></li>
                                    <li>
                                        <a href="#" aria-label="Next" onClick={()=>{this.changePage(-3)}} style={{pointerEvents:this.state.pages.isLastPage? "none" :"auto"}}>
                                            <span aria-hidden="true" >&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        {/*<Page prop = {this.state.pages}/>*/}
                    </div>
                </div>
            </div>
        )
    }
}